﻿@{
    ViewBag.Title = "登录";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录系统</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.10.1/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <style>
        .demo-login-container {
            width: 320px;
            margin: 21px auto 0;
        }

        .demo-login-other.layui-icon {
            position: relative;
            display: inline-block;
            margin: 0 2px;
            top: 2px;
            font-size: 26px;
        }

        /* 验证码输入框样式 */
        .captcha-input {
            width: 60%;
            display: inline-block;
        }

        /* 验证码图片样式 */
        .captcha-img {
            width: 35%;
            height: 38px;
            display: inline-block;
            float: right;
            cursor: pointer;
            border: 1px solid #e6e6e6;
            border-radius: 2px;
        }

        /* 清除浮动 */
        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }
    </style>

    <form class="layui-form">
        <div class="demo-login-container">
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input type="text" name="UserName" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-password"></i>
                    </div>
                    <input type="password" name="Password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                </div>
            </div>
            <div class="layui-form-item clearfix">
                <input type="text" name="Captcha" class="captcha-input layui-input" lay-verify="required" placeholder="请输入验证码" lay-reqtext="请输入验证码">
                <img id="captchaImg" class="captcha-img" src="#" alt="验证码">
            </div>
            <div class="layui-form-item">
                <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login-submit">登录</button>
            </div>
        </div>
    </form>
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->

    <script src="//unpkg.com/layui@2.10.1/dist/layui.js"></script>
    <script>
        layui.use(['form', 'layer', 'jquery'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;

            // 生成验证码
            function generateCaptcha() {
                var captcha = '';
                var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
                for (var i = 0; i < 4; i++) {
                    captcha += chars.charAt(Math.floor(Math.random() * chars.length));
                }
                return captcha;
            }

            // 显示验证码图片
            function displayCaptcha(captcha) {
                var canvas = document.createElement('canvas');
                canvas.width = 100;
                canvas.height = 38;
                var ctx = canvas.getContext('2d');
                ctx.font = '20px Arial';
                ctx.textAlign = 'center';
                ctx.fillStyle = '#000';
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                for (var i = 0; i < captcha.length; i++) {
                    ctx.fillText(captcha.charAt(i), (i * 20) + 15, 28);
                }
                var imgData = canvas.toDataURL('image/png');
                $('#captchaImg').attr('src', imgData);
                return captcha;
            }

            var currentCaptcha = displayCaptcha(generateCaptcha());

            // 刷新验证码
            function refreshCaptcha() {
                currentCaptcha = displayCaptcha(generateCaptcha());
            }

            $('#captchaImg').click(function () {
                refreshCaptcha();
            });

            // 提交事件
            form.on('submit(login-submit)', function (data) {
                var field = data.field; // 获取表单字段值
                var loadIndex = layer.load(2); // 显示加载中

                var inputCaptcha = field.Captcha;
                if (inputCaptcha.toUpperCase() !== currentCaptcha.toUpperCase()) {
                    layer.close(loadIndex); // 关闭加载中
                    layer.msg('验证码错误', { icon: 2 });
                    refreshCaptcha(); // 刷新验证码
                    return false;
                }

                $.ajax({
                     url: "https://localhost:7174/api/Message/Login",
                    //url: "@ViewBag.BaseUrl/T5/Message/Login",
                    type: 'GET',
                    data: {
                        UserName: field.UserName,
                        Password: field.Password,
                        Captcha: field.Captcha
                    },
                    dataType: 'json',
                    success: function (res) {
                        console.log(res)
                        layer.close(loadIndex); // 关闭加载中

                        if (res.code === 202) { // 根据API文档，成功code为30

                            
                            if (res.data) {
                            // 存储 nickName 到 localStorage
                                console.log("查看登录接口返回数据",res.data);
                                console.log("在登录这查看登录信息", res.data.userName);
                                localStorage.setItem('userData', res.data.userName);
                                localStorage.setItem('nickName', res.data.nickName);
                            }
                            // 登录成功
                            layer.msg(res.msg, { icon: 1 }, function () {
                               
                                console.log('用户数据:', res);
                                // 跳转到首页或其他页面
                                window.location.href = '/RBAC/HostMain';
                            });
                        } else {
                            // 登录失败
                            layer.msg(res.msg || '登录失败', { icon: 2 });
                            console.log('用户数据:', res);
                            refreshCaptcha(); // 刷新验证码
                        }
                    },
                    error: function (xhr, status, error) {
                        layer.close(loadIndex); // 关闭加载中
                        layer.msg('请求失败: ' + error, { icon: 2 });
                    }
                });
                return false; // 阻止默认 form 跳转
            });
        });
    </script>
</body>
</html>